<template>
	<view>
		<!-- #ifdef MP -->
		<u-navbar 
		:is-back="uNavbar.isBack"
		:border-bottom="uNavbar.borderBottom">
			<view class="slot-wrap">作品分类</view>
		</u-navbar>
		<!-- #endif -->

		<!-- #ifndef MP -->
		<view class="status_bar"></view>
		<!-- #endif -->

		<!-- 正文内容 -->
		<view>
			<view class="tabs">
				<view class="tabs__rela">
					<view class="tabWidth">
						<take-tabs font-size="28" :bold="false" height="88" inactive-color="#101010" active-color="#FFFFFF"
						:list="takeTabs.list"
						:current="takeTabs.current" 
						:bar-style="takeTabs.barStyle"
						@change="change"></take-tabs>
					</view>
					<u-icon custom-prefix="icon" size="48" color="#101010" class="icon" :name="uNavbar.uIcon"
						@click="handIcon"></u-icon>
				</view>
			</view>

			<view class="carousel">
				<block v-for="item in list" :key="item.id">
					<view class="__list">
						<view class="title">
							<view class="label u-flex u-row-between">
								<text class="labelTitl">{{item.title}}</text>
								<view class="labelList">
									<block v-for="(it,i) in item.label" :key="i">
										<text>{{it}}</text>
									</block>
								</view>
							</view>
							<view class="describe u-line-1">{{item.describe}}</view>
							<u-icon class="uIcon" name="xiazai2" custom-prefix="icon" size="28" color="#D5D5D5"
								label-color="#D5D5D5" label-size="24" top="4" :label="item.count"></u-icon>
						</view>
						<scroll-view :class="uNavbar.uIcon == 'shouji1'?'scrollPhone':'scrollNetBook'" :scroll-x="true" :show-scrollbar="false">
							<block v-for="(e,i) in item.img" :key="i">
								<image :src="e.img"></image>
							</block>
						</scroll-view>
					</view>
				</block>
			</view>
		</view>

		<u-tabbar :list="tabBarList" iconSize="48"></u-tabbar>
	</view>
</template>

<script>
	import takeTabs from '@/components/take-tabs.vue'
	import { mapGetters } from 'vuex'
	export default {
		components: {
			"take-tabs":takeTabs
		},
		data() {
			return {
				list: [ // 数据渲染
					{
						id: 1,
						title: '测试数据',
						label: ['标签'],
						count: 1200,
						describe: '描述',
						img: [{
								id: 123,
								img: '../../static/image/e3.png'
							},
							{
								id: 234,
								img: '../../static/image/e3.png'
							},
							{
								id: 345,
								img: '../../static/image/e3.png'
							},
							{
								id: 456,
								img: '../../static/image/e3.png'
							},
						]
					},
					{
						id: 2,
						title: '测试数据',
						label: ['标签'],
						count: 1200,
						describe: '描述',
						img: [{
								id: 123,
								img: '../../static/image/e3.png'
							},
							{
								id: 234,
								img: '../../static/image/e3.png'
							},
							{
								id: 345,
								img: '../../static/image/e3.png'
							},
							{
								id: 456,
								img: '../../static/image/e3.png'
							},
						]
					}
				],
				uNavbar: {
					isback: false,
					borderBottom: false,
					uIcon: 'shouji1',
				},
				takeTabs: { // 菜单切换
					list: [ // 可通过读取后端返回的数据做tabs
						{
							name: '待收货'
						},
						{
							name: '待付款'
						},
						{
							name: '待评价',
						},
						{
							name: '待付款'
						},
						{
							name: '待付款'
						},
						{
							name: '擦擦款'
						},
					],
					current: 0, // 指定哪个tab为激活状态
					barStyle: {
						backgroundColor: '#101010',
						width: '136rpx',
						height: '60rpx',
						borderRadius: '34rpx'
					}
				},
				loading: true, // 是否显示骨架屏组件
			}
		},
		methods: {
			// 切换tabs
			change(index) {
				this.takeTabs.current = index;
			},
			// 点击图标时触发
			handIcon() {
				let uIcon = this.uNavbar.uIcon === 'shouji1' ? 'diannaopcxianshiqi' : 'shouji1';
				this.uNavbar.uIcon = uIcon;
			},
		},
		computed: {
			...mapGetters([
				'tabBarList',
			])
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		font-weight: 700;
		font-size: 48rpx;
		color: #101010;
		line-height: 60rpx;
		text-align: left;
		padding-left: 40rpx;
	}
	// 状态栏的样式
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	
	.tabs {
		position: fixed;
		left: 0;
		width: 100%;
		/* #ifndef MP */
		padding: 8px 0;
		/* #endif */
		background-color: #FFF;
		z-index: 999999;
		
		.tabs__rela{
			padding-left: 40rpx;
			width: 100%;
			position: relative;
			
			.tabWidth {
				width: calc(100% - 128rpx);
				height: 88rpx;
			}
			
			.icon {
				position: absolute;
				top: 20rpx;
				right: 32rpx;
			}
			
		}

		
	}

	.carousel {
		padding-top: 120rpx;
		
		.__list{
			margin-bottom: 50rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
		}

		.scrollPhone {
			white-space: nowrap; // 规定段落文本不换行
			width: 100%;
			height: 480rpx;
			padding-left: 40rpx;
			box-sizing: border-box;

			image {
				width: 276rpx;
				height: 100%;
				margin-right: 20rpx;
				border-radius: 16rpx;

				&:last-child {
					margin-right: 40rpx;
				}
			}
		}

		.scrollNetBook {
			white-space: nowrap;
			width: 100%;
			height: 272rpx;
			padding-left: 40rpx;
			box-sizing: border-box;

			image {
				width: 400rpx;
				height: 100%;
				margin-right: 20rpx;
				border-radius: 16rpx;

				&:last-child {
					margin-right: 40rpx;
				}
			}
		}
	}

	.title {
		padding: 0 40rpx;
		position: relative;
		margin-bottom: 30rpx;

		.label {
			.labelTitle {
				color: #101010;
				font-weight: bold;
				font-size: 40rpx;
				 margin-bottom: 5px;
			}

			.labelList {
				display: flex;

				text {
					width: 70rpx;
					height: 32rpx;
					background-color: rgb(232, 52, 52);
					text-align: center;
					line-height: 32rpx;
					font-size: 22rpx;
					color: #FFFFFE;
					border-radius: 100rpx;
				}
			}
		}

		.describe {
			width: 444rpx;
			line-height: 40rpx;
			color: rgb(213, 213, 213);
			font-weight: 400;
			font-size: 28rpx;

		}

		.uIcon {
			position: absolute;
			right: 40rpx;
			bottom: 6rpx;
		}
	}

</style>
